<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		//sheet 초기화
		var cfg = {
		    Chart : {
				Animation : true,
		        PlotBackgroundColor : "#FAFAFA",
				PlotBorderColor:"#A9AEB1",
		        PlotBorderWidth:0.5,
				BackgroundColor:{
					LinearGradient : [0,0,100,500],
					Stops : [
						[0, "#D7E1F3"],
						[1, "#FFFFFF"]
					]
				},
				BorderColor : "#84888B",
				Type : "arearange",
		        Style : {
		            FontSize : "20px"
		        }		
		    },
		    
		    Legend : {
		    	enabled: false
		    },
		    
		    XAxis: {
		    	type: 'datetime'
            },
            
		    YAxis : {
		    	title: {
		            text: null
		        }
		    },
		    
            tooltip: {
            	crosshairs: true,
		        shared: true,
		        valueSuffix: '°C'
    	    }
		}
		
		myChart.SetOptions(cfg);
		
// 		$.ajax({
// 			dataType: "json",
// 			url: "../data/chartdata_range.json",
// 			success : function(response) {
// 				drawJson(data);
// 			}
// 		});

		$.getJSON("../data/chartdata_range.json", function(data) {
			drawJson(data);
		});
	});
	
	function drawJson(data) {
		myChart.SetSeriesOptions([{
			name: 'Temperatures',
	        data: data
		}]);
		myChart.Draw();
	}
	
</script>
<title>Area range 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/chartNavi.jsp" %>	
	<div id="title">Area range 예제</div>
	<div id="desc">
		arearange 타입으로 설정 후, 조회된 데이터를 차트에 좌우로 나눠서 표현한다.
	</div>

	<div id="functionArea">
		chart: {<br>
	    &nbsp;&nbsp;&nbsp;&nbsp;Type : "arearange",<br>
	    }
	</div>
	
	<div id="viewArea">
		<script type="text/javascript">
			createIBChart("myChart", "1000px", "400px");
		</script>
	</div>
</div>
</body>
</html>